<template>
  <div>
    <!-- <p>根据栏目的配置进行显示，显示规则：</p>
    <p>1.如果栏目中配置有轮播图固定在第1行显示轮播图，轮播图可根据配置显示在左侧或右侧；单独计算一个第1行显示的子栏目列表；</p>
    <p>2.如果栏目中没有配置轮播图，判断配置的显示子栏目列表，按照先后顺序进行显示</p>
    <p>3.如果栏目中没有配置轮播图，并且没有配置任何的显示子栏目列表，只能显示当前栏目的文章列表，如果没有文章显示为没有任何数据</p>
    <p>需要得到的信息有：是否有配置显示栏目的轮播图、是否有配置需要显示的子栏目列表、第一行显示的子栏目集合、除第一行外需要显示的子栏目集合</p>     -->
    <!-- 显示顺序：如果有轮播图显示第一行、如果有子栏目根据数量和排版显示一行或多行、如果轮播图和子栏目都没有显示当前栏目及文章列表 -->
    <!-- 在显示第一行数据（轮播图、栏目）前判断是否有第0个横隔 -->
    <a-row
      v-if="categorySeptumVisible(0x0)"
      justify="center"
      :style="{ height: categorySeptumHeight(0x0) }"
    >
      <a-col :span="24" class="h-full truncate">
        <CmsCategorySeptum
          :swipperDataId="categroySeptumSwippersIndex(0x0)"
          :swippers="currentCategoryData.septums[categroySeptumSwippersIndex(0x0)]"
          :display="categorySeptumDisplay(0x0)"
        />
      </a-col>
    </a-row>
    <a-row
      v-if="categoryHasSwippers"
      justify="center"
      :gutter="16"
      class="cms-category-content-swipper-row"
      :style="{ marginLeft: 0, marginRight: 0 }"
    >
      <!-- 第一行--轮播图显示在左侧 -->
      <a-col v-if="categorySwipperShowInLeft" :xs="24" :md="categorySwipperWidth">
        <CmsCategorySwipper :swippers="currentCategoryData.swippers" />
      </a-col>
      <!-- 第一行--显示配置的栏目列表 -->
      <a-col
        v-for="(item, index) in categorySwipperRowChilds"
        :xs="24"
        :md="
          item.width === undefined || item.width === null || item.width < 0x1 || item.width > 24
            ? 12
            : item.width
        "
      >
        <!-- <p>可以修改根据component使用不同的栏目显示组件进行不同样式和风格的显示</p> -->
        <!-- <p>当前栏目ID：row={{ rowItem }} col={{ colItem }} component={{ colItem.component }}</p> -->
        <!-- 如果没有子栏目界面中只显示当前栏目的轮播图（不管是否有）和当前栏目中的文章列表（界面中只显示1个栏目时显示栏目中的所有文章分页表格） -->
        <!-- 有子栏目时判断当前子栏目显示使用的组件，如果没有设置默认使用Top-N文章显示组件 -->
        <template v-if="categoryHasChilds === true">
          <CmsCategoryChildCovers
            v-if="item.component === 2"
            :category="currentCategoryData.childs[index].category"
          />
          <CmsCategoryTopNArticleCovers
            v-else-if="item.component === 3"
            :category="currentCategoryData.childs[index].category"
          />
          <CmsTopNArticleCovers
            v-else-if="item.component === 4"
            :category="currentCategoryData.childs[index].category"
          />
          <CmsCategoryChildTabs
            v-else-if="item.component === 5"
            :category="currentCategoryData.childs[index].category"
            :articles="currentCategoryData.childs[index].articles"
            :childs="currentCategoryData.childs[index].childs"
          />
          <CmsCategoriesTopNArticles
            v-else-if="item.component === 6"
            :category="currentCategoryData.childs[index].category"
          />
          <CmsComponetSafetyDay
            v-else-if="item.component === 21"
            :category="currentCategoryData.childs[index].category"
          />
          <CmsCategoryTopNArticles
            v-else
            :category="currentCategoryData.childs[index].category"
            :articles="currentCategoryData.childs[index].articles"
          />
        </template>
        <!-- 没有子栏目时，固定使用分页显示栏目中的所有文章组件 -->
        <CmsCategoryArticleTable
          v-if="categoryHasChilds === false"
          :category="currentCategoryData.category"
          :articles="currentCategoryData.articles"
        />
      </a-col>

      <!-- 第一行--轮播图显示在右侧 -->
      <a-col v-if="!categorySwipperShowInLeft" :xs="24" :lg="categorySwipperWidth">
        <CmsCategorySwipper :swippers="currentCategoryData.swippers" />
      </a-col>
    </a-row>
    <!-- 栏目中有子栏目，遍历子栏目显示行，逐个显示子栏目 -->
    <!-- <p>有子栏目时列出所有子栏目信息和top-n条文章；</p> -->
    <!-- <p>可以判断每个栏目的封面页图片，有的话显示图片</p> -->
    <template v-if="categoryHasChilds === true" v-for="(rowItem, index) in categoryChildsRows">
      <!-- 显示横隔，因为index从0开始，第1行栏目显示完后，显示的第1个横隔的下标要从1开始（下标为0是表示在所有栏目信息开始前的横隔） -->
      <a-row
        v-if="categorySeptumVisible(index + 1)"
        justify="center"
        :style="{ height: categorySeptumHeight(index + 1) }"
      >
        <a-col :span="24" class="h-full truncate">
          <CmsCategorySeptum
            class="h-full"
            :id="index + 1"
            :swipperDataId="categroySeptumSwippersIndex(index + 1)"
            :swippers="currentCategoryData.septums[categroySeptumSwippersIndex(index + 1)]"
            :display="categorySeptumDisplay(index + 1)"
          />
        </a-col>
      </a-row>
      <!-- 显示一行中的子栏目 -->
      <a-row justify="center" class="cms-category-content-row">
        <a-col v-for="colItem in rowItem.columns" :xs="24" :md="colItem.colWidth">
          <!-- <p>可以修改根据component使用不同的栏目显示组件进行不同样式和风格的显示</p> -->
          <!-- <p>当前栏目ID：row={{ rowItem }} col={{ colItem }} component={{ colItem.component }}</p> -->
          <!-- <p>当前栏目ID：col={{ colItem }} component={{ colItem.component }}</p> -->
          <!-- 有子栏目时判断当前子栏目显示使用的组件，如果没有设置默认使用Top-N文章显示组件 -->
          <CmsCategoryChildCovers
            v-if="colItem.component === 2"
            :category="currentCategoryData.childs[colItem.dataSeqId].category"
          />
          <CmsCategoryTopNArticleCovers
            v-else-if="colItem.component === 3"
            :category="currentCategoryData.childs[colItem.dataSeqId].category"
          />
          <CmsTopNArticleCovers
            v-else-if="colItem.component === 4"
            :category="currentCategoryData.childs[colItem.dataSeqId].category"
          />
          <CmsCategoryChildTabs
            v-else-if="colItem.component === 5"
            :category="currentCategoryData.childs[colItem.dataSeqId].category"
            :articles="currentCategoryData.childs[colItem.dataSeqId].articles"
            :childs="currentCategoryData.childs[colItem.dataSeqId].childs"
          />
          <CmsCategoriesTopNArticles
            v-else-if="colItem.component === 6"
            :category="currentCategoryData.childs[colItem.dataSeqId].category"
          />
          <CmsComponetSafetyDay
            v-else-if="colItem.component === 21"
            :category="currentCategoryData.childs[colItem.dataSeqId].category"
          />
          <CmsCategoryTopNArticles
            v-else
            :category="currentCategoryData.childs[colItem.dataSeqId].category"
            :articles="currentCategoryData.childs[colItem.dataSeqId].articles"
          />
        </a-col>
      </a-row>
    </template>
    <!-- 如果同时没有轮播图行和子栏目行，不管当前栏目是否有文章均显示当前栏目 -->
    <a-row
      v-if="categoryHasSwippers === false && categoryHasChilds === false"
      justify="center"
      class="cms-category-content-row"
    >
      <a-col :span="24">
        <CmsCategoryArticleTable
          :category="currentCategoryData.category"
          :articles="currentCategoryData.articles"
        />
      </a-col>
    </a-row>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, reactive, onBeforeMount, onUnmounted, computed } from 'vue';
  import { useRouter } from 'vue-router';

  import { useCmsStore } from '/@/store/modules/cms';

  // 引入当前栏目的轮播图组件
  import CmsCategorySwipper from './CmsCategorySwipper.vue';
  // 引入横隔组件
  import CmsCategorySeptum from './CmsCategorySeptum.vue';
  // 引入单个栏目的不同展示效果组件
  import CmsCategoryTopNArticles from './CmsCategoryTopNArticles.vue';
  import CmsCategoryArticleTable from './CmsCategoryArticleTable.vue';
  import CmsCategoryChildCovers from './CmsCategoryChildCovers.vue';
  import CmsCategoryTopNArticleCovers from './CmsCategoryTopNArticleCovers.vue';
  import CmsTopNArticleCovers from './CmsTopNArticleCovers.vue';
  import CmsCategoryChildTabs from './CmsCategoryChildTabs.vue';
  import CmsCategoriesTopNArticles from './CmsCategoriesTopNArticles.vue';
  import CmsComponetSafetyDay from './CmsComponetSafetyDay.vue';

  import { getDisplayCategory } from '/@/api/cms/display';

  export default defineComponent({
    name: 'CmsCategoryContent',
    components: {
      CmsCategorySwipper,
      CmsCategorySeptum,
      CmsCategoryTopNArticles,
      CmsCategoryArticleTable,
      CmsCategoryChildCovers,
      CmsCategoryTopNArticleCovers,
      CmsTopNArticleCovers,
      CmsCategoryChildTabs,
      CmsCategoriesTopNArticles,
      CmsComponetSafetyDay,
    },
    //子组件中使用props接收父组件传递的数据，可以直接使用
    props: {
      getCategoryLayoutBodyStyle: Function,
    },
    //要再setup函数中获取或使用props，需要在setup函数中获取props对象
    setup(props) {
      const router = useRouter();
      const cmsStore = useCmsStore();

      /**
       * 当前显示的栏目ID
       */
      const categoryId = ref<string | number>();
      /**
       * 当前栏目的数据，当前栏目DTO、当前栏目的文章集合、当前栏目的轮播图集合、当前栏目的横隔轮播集合、当前栏目的子栏目集合
       */
      const currentCategoryData = reactive({
        category: {},
        articles: [],
        swippers: [],
        septums: [], //使用下标（从0开始）获取横隔轮播图的数据，下标为横隔配置中的dataId-1
        childs: [],
      });
      //当前栏目是否需要显示轮播图，默认为不显示；如果设置有轮播图图，但轮播图的数据为空时判断结果也为不需要显示轮播图
      let categoryHasSwippers = computed(() => {
        // return false;//测试使用
        //判断轮播图数据是否为空
        if (
          currentCategoryData.swippers != undefined &&
          currentCategoryData.swippers != null &&
          currentCategoryData.swippers.length > 0x0
        ) {
          //从当前栏目的轮播图配置属性中获取
          if (currentCategoryData.category != undefined && currentCategoryData.category != null) {
            if (
              currentCategoryData.category.layout != undefined &&
              currentCategoryData.category.layout != null &&
              currentCategoryData.category.layout != ''
            ) {
              let layoutJsonString = currentCategoryData.category.layout;
              let layoutJson = layoutJsonString ? JSON.parse(layoutJsonString) : {};
              if (layoutJson.swipper.visible == true) {
                //可以在此再根据实际配置的轮播图列表再次进行判断，如果没有设置有效的轮播图列表也不进行显示
                return true;
              }
            }
          }
        }
        return false;
      });
      //当前栏目的轮播图显示位置，是否显示在左侧，默认显示在左侧，先显示轮播图
      let categorySwipperShowInLeft = computed(() => {
        if (categoryHasSwippers.value) {
          let layoutJsonString = currentCategoryData.category.layout;
          let layoutJson = layoutJsonString ? JSON.parse(layoutJsonString) : {};
          let position = layoutJson.swipper.position;
          if (position == 'right' || position == 'RIGHT') {
            return false;
          }
        }
        return true;
      });
      //当前栏目的轮播图显示宽度，默认为显示一半
      let categorySwipperWidth = computed(() => {
        if (categoryHasSwippers.value) {
          let layoutJsonString = currentCategoryData.category.layout;
          let layoutJson = layoutJsonString ? JSON.parse(layoutJsonString) : {};
          if (
            layoutJson != undefined &&
            layoutJson != null &&
            layoutJson.swipper != undefined &&
            layoutJson.swipper != null
          ) {
            let width = layoutJson.swipper.width;
            if (width != undefined && width != null) {
              if (width > 24) {
                return 24;
              } else if (width > 0) {
                return width;
              }
            }
          }
        }
        //如果需要显示当前栏目的轮播图，默认宽度为一半
        return 12;
      });
      //当前栏目的轮播图显示高度，默认为显示20rem
      let categorySwipperHeight = computed(() => {
        if (categoryHasSwippers.value) {
          let layoutJsonString = currentCategoryData.category.layout;
          let layoutJson = layoutJsonString ? JSON.parse(layoutJsonString) : {};
          if (
            layoutJson != undefined &&
            layoutJson != null &&
            layoutJson.swipper != undefined &&
            layoutJson.swipper != null
          ) {
            let height = layoutJson.swipper.height;
            if (height != undefined && height != null && height >= 1 && height <= 20) {
              return height + 'rem';
            }
          }
        }
        //如果需要显示当前栏目的轮播图，默认高度为20
        return 20 + 'rem';
      });
      //栏目轮播图行（第一行）显示子栏目的数量，默认为0
      let categorySwipperRowChildCount = computed(() => {
        if (categoryHasSwippers.value) {
          let rowWidth = categorySwipperWidth.value;
          let hasChild = categoryHasChilds.value;
          if (hasChild) {
            //如果有子栏目需要显示才需要计算第一行中子栏目所占宽度
            let rowChildCount = rowWidth >= 24 ? 0x0 : 0x1;
            //遍历子栏目计算第一行中显示的宽度对应能显示的子栏目数量
            let layoutJsonString = currentCategoryData.category.layout;
            let layoutJson = layoutJsonString ? JSON.parse(layoutJsonString) : {};
            if (
              layoutJson != undefined &&
              layoutJson != null &&
              layoutJson.configs != undefined &&
              layoutJson.configs != null &&
              layoutJson.configs.length > 0x0
            ) {
              rowChildCount = 0x0;
              while (rowWidth < 24) {
                //与轮播显示在一行上的指定默认宽度为12，如果没有设置宽度或不正确使用默认宽度
                let childCategoryWidth = 12;
                let element = layoutJson.configs[rowChildCount];
                if (element != undefined && element != null) {
                  let elementWidth = element.width;
                  if (
                    elementWidth != undefined &&
                    elementWidth != null &&
                    elementWidth >= 1 &&
                    elementWidth <= 24
                  ) {
                    childCategoryWidth = elementWidth;
                  }
                }

                if (rowWidth + childCategoryWidth <= 24) {
                  //如果已有的行宽度加上当前栏目的显示宽度小于等于24，当前栏目可以显示在第一行上，显示的数量加1
                  rowChildCount++;
                }
                rowWidth += childCategoryWidth;
              }
            }

            return rowChildCount;
          }
        }
        return 0x0;
      });
      //栏目轮播图行（第一行）显示子栏目集合
      let categorySwipperRowChilds = computed(() => {
        let result = [];
        if (categoryHasSwippers.value) {
          let childCount = categorySwipperRowChildCount.value;
          let width = 24 - categorySwipperWidth.value;
          if (childCount > 0x0) {
            let layoutJsonString = currentCategoryData.category.layout;
            let layoutJson = layoutJsonString ? JSON.parse(layoutJsonString) : {};

            if (
              layoutJson.configs != undefined &&
              layoutJson.configs != null &&
              layoutJson.configs.length > 0x0
            ) {
              for (let i = 0; i < childCount; i++) {
                result.push(layoutJson.configs[i]);
              }
            }

            if (result.length < 0x1) {
              result.push({ width: width, component: 0 });
            }
          }
        }

        return result;
      });
      //当前栏目是否有文章列表，默认为没有文章列表
      let categoryHasArticles = computed(() => {
        // return false;//测试使用
        if (currentCategoryData.articles != null && currentCategoryData.articles.length > 0x0)
          return true;
        return false;
      });
      //当前栏目是否有配置显示的下级栏目，默认为没有
      let categoryHasChilds = computed(() => {
        // console.log('categoryHasChilds computed', JSON.stringify(currentCategoryData.childs));
        if (currentCategoryData.childs != null && currentCategoryData.childs.length > 0x0)
          return true;
        return false;
      });
      //根据子栏目的数量和显示宽度计算需要显示子栏目的行，除去有轮播图时显示的第一行子栏目
      //结构为-第1行：[{rowIndex:1,columns:[{colIndex:1,colWidth:12,dataSeqId:1,component:1},{colIndex:2,colWidth:12,dataSeqId:2,component:1}]}]
      //结构为-第2行：{rowIndex:2,columns:[{colIndex:1,colWidth:12,dataSeqId:3,component:1},{colIndex:2,colWidth:12,dataSeqId:4,component:1}]}
      let categoryChildsRows = computed(() => {
        let result = [];

        if (categoryHasChilds.value) {
          //获取在第一行与轮播图显示的子栏目，已经显示在第一行中的不需要再显示
          let swipperRowChildCount = categorySwipperRowChildCount.value;
          let totalChildCount = currentCategoryData.childs.length;
          console.log(
            'categoryChildsRows computed swipperRowChildCount=' +
              swipperRowChildCount +
              ' totalChildCount=' +
              totalChildCount,
          );

          if (totalChildCount > swipperRowChildCount) {
            //对应获取子栏目信息的索引序号
            let rowIndex = 0x1;
            let colIndex = 0x1;
            let rowSpan = 0x0;
            let row = { rowindex: rowIndex, columns: [] };
            //查询子栏目数据的索引，如果有轮播图行显示的栏目为栏目数量(不需要减1)，否则为0
            let dataSeqId = swipperRowChildCount > 0x0 ? swipperRowChildCount : 0x0;

            let layoutJsonString = currentCategoryData.category.layout;
            console.log('categoryChildsRows computed layoutJsonString', layoutJsonString);
            let layoutJson = layoutJsonString ? JSON.parse(layoutJsonString) : {};
            console.log('categoryChildsRows computed layoutJson', layoutJson);
            //当前栏目的版面布局Json中是否有栏目显示配置，默认为false表示没有，没有时栏目宽度默认为12，显示组件默认为空
            let hasCategoryLayoutConfigs = false;
            if (
              layoutJson != undefined &&
              layoutJson != null &&
              layoutJson.configs != undefined &&
              layoutJson.configs != null
            ) {
              hasCategoryLayoutConfigs = true;
            }
            console.log(
              'categoryChildsRows computed hasCategoryLayoutConfigs',
              hasCategoryLayoutConfigs,
            );

            for (let i = swipperRowChildCount; i < totalChildCount; i++) {
              //默认子栏目的显示宽度、组件等信息
              let childCategorySpan = 12;
              let childCategoryComponent = 1;
              if (hasCategoryLayoutConfigs) {
                //获取版面布局配置中的当前索引对应的显示宽度和组件配置信息
                let currentChildCategoryDisplayConfig = layoutJson.configs[i];
                // console.log(
                //   'categoryChildsRows computed currentChildCategoryDisplayConfig',
                //   currentChildCategoryDisplayConfig,
                // );
                if (
                  currentChildCategoryDisplayConfig != undefined &&
                  currentChildCategoryDisplayConfig != null
                ) {
                  let currentChildCategoryDisplayWidth = currentChildCategoryDisplayConfig.width;
                  let currentChildCategoryDisplayComponent =
                    currentChildCategoryDisplayConfig.component;
                  if (
                    currentChildCategoryDisplayWidth != undefined &&
                    currentChildCategoryDisplayWidth != null &&
                    currentChildCategoryDisplayWidth >= 1 &&
                    currentChildCategoryDisplayWidth <= 24
                  ) {
                    childCategorySpan = currentChildCategoryDisplayWidth;
                  }
                  if (
                    currentChildCategoryDisplayComponent != undefined &&
                    currentChildCategoryDisplayComponent != null &&
                    currentChildCategoryDisplayComponent > 0
                  ) {
                    childCategoryComponent = currentChildCategoryDisplayComponent;
                  }
                }
              }

              //如果栏目的显示宽度为0表示不显示，不需要添加到显示的行结果中
              if (childCategorySpan > 0x0) {
                //判断一行中的显示宽度是否超过最大宽度，超过需要重新作为一行
                if (rowSpan + childCategorySpan > 24) {
                  //当前子栏目需要在另一行中显示
                  result.push(row);

                  //初始化下一行
                  rowIndex++;
                  colIndex = 0x1;
                  rowSpan = 0x0;
                  row = { rowindex: rowIndex, columns: [] };
                }
                //判断当前栏目是否为最后一个，如果为最后一个，当前行中只有最后这一个栏目，设置宽度为24
                if (i + 1 === totalChildCount) childCategorySpan = 24 - rowSpan;
                rowSpan += childCategorySpan;
                //行信息中添加当前col信息
                let col = {
                  colIndex: colIndex++,
                  colWidth: childCategorySpan,
                  dataSeqId: dataSeqId++,
                  component: childCategoryComponent,
                };
                row.columns.push(col);
              }
            }

            //遍历子栏目结束，最后还剩余1行，添加到返回结果中
            if (rowSpan > 0x0) {
              result.push(row);
            }
          }
        }
        console.log('categoryChildsRows computed result', result);
        return result;
      });
      //获取指定顺序的横隔是否需要显示，index为下标，从0开始
      function categorySeptumVisible(index) {
        //如果横隔轮播图数据没有，任何横隔都不需要显示
        if (
          currentCategoryData.septums != undefined &&
          currentCategoryData.septums != null &&
          currentCategoryData.septums.length > 0x0
        ) {
          //从当前栏目的轮播图配置属性中获取
          if (currentCategoryData.category != undefined && currentCategoryData.category != null) {
            if (
              currentCategoryData.category.layout != undefined &&
              currentCategoryData.category.layout != null &&
              currentCategoryData.category.layout != ''
            ) {
              let layoutJsonString = currentCategoryData.category.layout;
              let layoutJson = layoutJsonString ? JSON.parse(layoutJsonString) : {};
              //横隔配置为数组，按下标顺序获取横隔配置
              if (
                layoutJson.septum != undefined &&
                layoutJson.septum != null &&
                layoutJson.septum.length > index
              ) {
                let currentSeptumJson = layoutJson.septum[index];
                if (currentSeptumJson != undefined && currentSeptumJson != null) {
                  //横隔配置中要求visible为true、dataId大于0
                  if (currentSeptumJson.visible == true && currentSeptumJson.dataId > 0x0) {
                    //同时还要求根据dataId获取到的横隔轮播信息不能为空
                    //显示配置中的dataId从1开始，横隔轮播图数据中的下标从0开始，获取横隔轮播图数据下标需要减1
                    let getSeptumSwipperIndex = currentSeptumJson.dataId - 1;
                    console.log(
                      'categorySeptumVisible compute index=' +
                        index +
                        ' currentSeptumJson.dataId=' +
                        currentSeptumJson.dataId +
                        ' currentCategoryData.septums.length=' +
                        currentCategoryData.septums.length +
                        ' getSeptumSwipperIndex=' +
                        getSeptumSwipperIndex,
                    );
                    if (currentCategoryData.septums.length >= getSeptumSwipperIndex) {
                      let septumSwippers = currentCategoryData.septums[getSeptumSwipperIndex];
                      console.log('septumSwippers', septumSwippers);
                      if (
                        septumSwippers != undefined &&
                        septumSwippers != null &&
                        septumSwippers.length > 0x0
                      ) {
                        return true;
                      }
                    }
                  }
                }
              }
            }
          }
        }
        return false;
      }
      //获取指定顺序的横隔对应显示轮播图数据的下标（下标从0开始）
      function categroySeptumSwippersIndex(index) {
        //从当前栏目的轮播图配置属性中获取
        if (currentCategoryData.category != undefined && currentCategoryData.category != null) {
          if (
            currentCategoryData.category.layout != undefined &&
            currentCategoryData.category.layout != null &&
            currentCategoryData.category.layout != ''
          ) {
            let layoutJsonString = currentCategoryData.category.layout;
            let layoutJson = layoutJsonString ? JSON.parse(layoutJsonString) : {};
            //横隔配置为数组，按下标顺序获取横隔配置
            if (
              layoutJson.septum != undefined &&
              layoutJson.septum != null &&
              layoutJson.septum.length > index
            ) {
              let currentSeptumJson = layoutJson.septum[index];
              if (currentSeptumJson != undefined && currentSeptumJson != null) {
                //横隔配置中要求visible为true、dataId大于0
                //同时还要求根据dataId获取到的横隔轮播信息不能为空
                if (currentSeptumJson.visible == true && currentSeptumJson.dataId > 0x0) {
                  //显示配置中的dataId从1开始，横隔轮播图数据中的下标从0开始，获取横隔轮播图数据下标需要减1
                  let getSeptumSwipperIndex = currentSeptumJson.dataId - 1;
                  return getSeptumSwipperIndex;
                }
              }
            }
          }
        }
        return 0x0;
      }
      //获取指定顺序的横隔显示高度，默认为20 rem
      function categorySeptumHeight(index) {
        //从当前栏目的轮播图配置属性中获取
        if (currentCategoryData.category != undefined && currentCategoryData.category != null) {
          if (
            currentCategoryData.category.layout != undefined &&
            currentCategoryData.category.layout != null &&
            currentCategoryData.category.layout != ''
          ) {
            let layoutJsonString = currentCategoryData.category.layout;
            let layoutJson = layoutJsonString ? JSON.parse(layoutJsonString) : {};
            //横隔配置为数组，按下标顺序获取横隔配置
            if (
              layoutJson.septum != undefined &&
              layoutJson.septum != null &&
              layoutJson.septum.length > index
            ) {
              let currentSeptumJson = layoutJson.septum[index];
              if (currentSeptumJson != undefined && currentSeptumJson != null) {
                //横隔配置中要求visible为true、dataId大于0
                //同时还要求根据dataId获取到的横隔轮播信息不能为空
                if (currentSeptumJson.visible == true && currentSeptumJson.dataId > 0x0) {
                  if (
                    currentSeptumJson.height != undefined &&
                    currentSeptumJson.height != null &&
                    currentSeptumJson.height != '' &&
                    currentSeptumJson.height > 0x0
                  )
                    return currentSeptumJson.height + 'rem';
                }
              }
            }
          }
        }
        return 5 + 'rem';
      }
      //获取指定顺序的横隔展示效果控制属性对象
      function categorySeptumDisplay(index) {
        let septumDisplay = {
          speed: 10,
          color: 'black',
          bgColor: 'white',
        };
        //从当前栏目的轮播图配置属性中获取
        if (currentCategoryData.category != undefined && currentCategoryData.category != null) {
          if (
            currentCategoryData.category.layout != undefined &&
            currentCategoryData.category.layout != null &&
            currentCategoryData.category.layout != ''
          ) {
            let layoutJsonString = currentCategoryData.category.layout;
            let layoutJson = layoutJsonString ? JSON.parse(layoutJsonString) : {};
            //横隔配置为数组，按下标顺序获取横隔配置
            if (
              layoutJson.septum != undefined &&
              layoutJson.septum != null &&
              layoutJson.septum.length > index
            ) {
              let currentSeptumJson = layoutJson.septum[index];
              if (currentSeptumJson != undefined && currentSeptumJson != null) {
                //横隔配置中要求visible为true、dataId大于0
                //同时还要求根据dataId获取到的横隔轮播信息不能为空
                if (currentSeptumJson.visible == true && currentSeptumJson.dataId > 0x0) {
                  septumDisplay.speed = currentSeptumJson.speed;
                  septumDisplay.color = currentSeptumJson.color;
                  septumDisplay.bgColor = currentSeptumJson.bgColor;
                }
              }
            }
          }
        }
        return septumDisplay;
      }

      //获取指定栏目的显示信息
      function getCategoryDisplayData() {
        getDisplayCategory(categoryId.value)
          .then((res) => {
            console.log('getCategoryDisplay res', res);
            currentCategoryData.category = res.category;
            currentCategoryData.articles = res.articles;
            //轮播图的数据需要根据分组ID进行处理，分别赋值给栏目轮播图和栏目横隔轮播
            currentCategoryData.swippers = [];
            currentCategoryData.septums = [];
            if (!res.swippers || res.swippers.length < 0x1) {
              //没有轮播图数据
            } else {
              //获取分组ID为0的赋值给栏目轮播图
              let categorySwippers = res.swippers.filter((obj) => obj.groupid === 0x0);
              if (
                categorySwippers != undefined &&
                categorySwippers != null &&
                categorySwippers.length > 0x0
              ) {
                currentCategoryData.swippers = categorySwippers;
              }
              //获取横隔（分组ID>0）的轮播图
              let categorySeptums = res.swippers.filter((obj) => obj.groupid > 0x0);
              if (
                categorySeptums != undefined &&
                categorySeptums != null &&
                categorySeptums.length > 0x0
              ) {
                // console.log('categorySeptums', categorySeptums);
                //先构造出按分组ID顺序的横隔数组，后面使用时直接使用数组下标取值
                let allGroupsSeptums = [];
                for (let groupId = 0x1; groupId <= 0x9; groupId++) {
                  const groupSeptum = categorySeptums.filter((obj) => obj.groupid === groupId);
                  if (!groupSeptum || groupSeptum.length < 0x1) {
                    //分组的横隔数据为空
                    allGroupsSeptums.push([]);
                  } else {
                    allGroupsSeptums.push(groupSeptum);
                  }
                }
                // console.log('allGroupsSeptums', allGroupsSeptums);
                currentCategoryData.septums = allGroupsSeptums;
              }
            }
            // console.log('getCategoryDisplayData septums', currentCategoryData.septums);

            currentCategoryData.childs = res.childs;
            //调用父组件中的事件，将当前栏目layout中的bodyStyle传递至父组件中
            // console.log('getCategoryDisplay res.category.layout', res.category.layout);
            // let layoutJsonString = res.category.layout;
            // let layoutJson = JSON.parse(layoutJsonString);
            // props.getCategoryLayoutBodyStyle(layoutJson.bodyStyle);
            //修改为由后台根据静态配置和动态配置获取处理完成后统一返回
            let bodyStyle = JSON.parse(res.bodyStyle);
            props.getCategoryLayoutBodyStyle(bodyStyle);
          })
          .catch((ex) => {
            console.log('getCategoryDisplay ex', ex);
          });
      }

      onBeforeMount(() => {
        console.log('CmsCategoryContent onBeforeMount');
        //获取栏目ID，先从url传参中获取，如果没有再从store中获取；可以直接输入url地址打开网页，所以先从url中获取
        //测试--获取路由地址传参 url中的参数使用params获取
        // console.log('CmsCategoryContent onBeforeMount router', router.currentRoute.value.params);
        if (router.currentRoute.value.params.id) {
          categoryId.value = router.currentRoute.value.params.id;
        }
        if (categoryId.value == undefined || categoryId.value == null) {
          console.log('CmsCategoryContent getCmsRouteParam from store', cmsStore.getCmsRouteParam);
          const cmsRouteParam = cmsStore.getCmsRouteParam;
          if (cmsRouteParam != undefined && cmsRouteParam != null) {
            categoryId.value = cmsStore.getCmsRouteParam.id;
          } else {
            categoryId.value = 0x0;
          }
        }

        //从后台接口获取栏目的数据
        getCategoryDisplayData();
      });
      onUnmounted(() => {
        console.log('CmsCategoryContent onUnmounted');
      });

      return {
        categoryId,
        currentCategoryData,
        categoryHasSwippers,
        categorySwipperShowInLeft,
        categorySwipperWidth,
        categorySwipperHeight,
        categorySwipperRowChildCount,
        categorySwipperRowChilds,
        categoryHasArticles,
        categoryHasChilds,
        categoryChildsRows,
        categorySeptumVisible,
        categroySeptumSwippersIndex,
        categorySeptumHeight,
        categorySeptumDisplay,
        getCategoryDisplayData,
      };
    },
  });
</script>
<style scoped lang="less">
  @import './cms.less';
</style>
